<template>
  <webtopo-svg-edit
    @on-return="onReturn"
    @on-preview="onPreview"
    @on-save="onSave"
    :data-model="import_model"
  ></webtopo-svg-edit>
</template>
<script setup lang="ts">
  import { IDataModel } from '@/components/webtopo-svg-edit/types';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
  import { saveRoomConfig } from '@/api/project';
  //我是从数据库获取到的数据
  const import_model = ref('');
  const router = useRouter();
  const onReturn = () => {
    console.log('点击了返回按钮');
    router.go(-1);
  };
  const onPreview = (data_model: IDataModel) => {
    const roomRow = JSON.parse(localStorage.getItem('roomRow') || '');
    localStorage.setItem('data_model', JSON.stringify(data_model));
    router.push({
      name: 'preview',
      query: {
        projectType: roomRow.type || '',
        roomCode: roomRow.roomCode || ''
      }
    });
  };
  const onSave = (data_model: IDataModel) => {
    const roomRow = JSON.parse(localStorage.getItem('roomRow') || '');
    let data = {
      projectType: roomRow.type || '',
      roomCode: roomRow.roomCode || '',
      roomConfiguration: JSON.stringify(data_model)
    };
    saveRoomConfig(data);
    localStorage.setItem('data_model', JSON.stringify(data_model));
    console.log('点击了保存按钮，可以在此处将图存到数据库');
  };
</script>
